<template>
    <div class="common-layout">
        <el-container>
            <el-header>


                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <a href="/">网格化管理</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>物理网格</el-breadcrumb-item>

                </el-breadcrumb>


            </el-header>
            <el-container>
                <el-aside width="200px">
                    <!-- {{ data }} -->
                    <el-input v-model="filterText" class="w-60 mb-2" placeholder="关键字" />

                    <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="data"
                        :props="defaultProps" default-expand-all :filter-node-method="filterNode"
                        @node-click="nodeClick" />
<!-- 
                    <el-input v-model="filterText" class="w-60 mb-2" placeholder="Filter keyword" />

                    <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="data"
                        :props="defaultProps" default-expand-all :filter-node-method="filterNode" /> -->



                </el-aside>
                <el-main>

                    <el-card style="max-width: 100%">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="网格名称">
                                <el-input v-model="formInline.GridName" placeholder="请输入网格名称" clearable />
                            </el-form-item>
                            <el-form-item label="所属区域">
                                <el-input v-model="formInline.AreaName" placeholder="请输入所属区域" clearable />
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                    <el-card style="max-width: 100%">
                        <table>
                            <tbody>
                                <tr>
                                    <td>
                                        <el-button type="primary" @click="toAdd">新增</el-button>

                                    </td>
                                    <td>
                                        <el-button type="primary" @click="copy">复制</el-button>

                                    </td>
                                    <td> <!-- 上传 -->
                                        <el-upload class="avatar-uploader"
                                            action="http://localhost:5028/api/Upload/ImportGrid" :show-file-list="false"
                                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                            <el-button type="primary">导入</el-button>
                                        </el-upload>
                                    </td>
                                </tr>
                            </tbody>

                        </table>

                        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55" /> <!-- 复选框 -->
                            <el-table-column prop="gridCode" label="网格编码" width="150" />
                            <el-table-column prop="gridName" label="网格名称" width="120" />
                            <el-table-column prop="areaName" label="所属区域" width="120" />
                            <el-table-column fixed="right" label="操作" min-width="120">
                                <template #default='scope'>
                                    <el-button link type="primary" size="small" @click="detail(scope.row)">
                                        详情
                                    </el-button>
                                    <el-button link type="primary" size="small">删除,3号完成</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>

                </el-main>
            </el-container>
        </el-container>
    </div>



    <!-- 对话框展示详情 -->

    <el-dialog v-model="dialogDetail" title="展示详情" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="所属区域">
                <el-input v-model="ruleForm.areaName" disabled="true" />
            </el-form-item>

            <el-form-item label="网格编码">
                <el-input v-model="ruleForm.gridCode" disabled="true" />
            </el-form-item>

            <el-form-item label="网格名称">
                <el-input v-model="ruleForm.gridName" disabled="true" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--新增物理网格对话框  -->
    <el-dialog v-model="dialogAdd" title="新增物理网格" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="所属区域">
                <el-input v-model="ruleForm.areaName" disabled="true" />
            </el-form-item>

            <el-form-item label="网格编码" prop="gridCode">
                <el-input     maxlength="10" v-model="ruleForm.gridCode" />
            </el-form-item>

            <el-form-item label="网格名称" prop="gridName">
                <el-input v-model="ruleForm.gridName" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitFormAdd(ruleFormRef)">
                    确认
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


</template>



<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { ElMessage, type FilterNodeMethodFunction, type TreeInstance } from 'element-plus'
import http from '@/http/axiosHelper';
import { reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<TreeInstance>()

const defaultProps = {
    children: 'children',
    label: 'areaName',
    id: 'id'
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
    if (!value) return true
    return data.areaName.includes(value)
}

//树形控件
const data = ref([])
const getData = () => {

    http.get('/T7/Area/GetAreaTree').then(res => {
        data.value = res.data.data
    })
}

const nodeClick = (x: any) => {
    console.log(x)
    ruleForm.areaId=x.id
    ruleForm.areaName= x.areaName
}

//搜索区域
const formInline = reactive({
    GridName: '',
    AreaName: ''
})

const tableData = ref([])

const search = () => {
    http.get('/T7/PhsicalGrid/SearchPhysical', { params: formInline }).then(res => {
        tableData.value = res.data.data
    })
}
//表格复选框
const selections = ref([])
const handleSelectionChange = (val: any) => {
    selections.value = val
}

const copy = () => {
    if (selections.value.length == 0) {
        ElMessage.warning("您没有选择要复制的行数据");
        return;
    }
    http.post('/T7/PhsicalGrid/CopyPhsicalGrid', { dtos: selections.value }).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.msg);
            search();
        }
    })

}
const dialogDetail = ref(false)

const detail = (row: any) => {
    dialogDetail.value = true;
    Object.assign(ruleForm, row)
}

//弹窗详情脚本
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    "id": null,
    "gridCode": "",
    "gridName": "",
    "areaId": null,
    "areaName": ""
})



const rules = reactive<FormRules>({
gridCode: [
    { required: true, message: '请输入网格编码', trigger: 'blur' }
  ],gridName: [
    { required: true, message: '请输入网格名称', trigger: 'blur' }
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    dialogDetail.value = false;
}

//excel 上传导入
//上传成功之后
const handleAvatarSuccess = (
    res: any
) => {
    console.log(res)
    ElMessage.success(res.msg);
    search();//刷新数据
}
//校验格式
const beforeAvatarUpload = (rawFile: any) => {

    return true  //不校验
}
//新增物理网格
const dialogAdd = ref(false)
const toAdd=()=>{
    if(ruleForm.areaName==""){
        ElMessage.error("请您先在左侧树形控件中选择物理网格的区域");
        return;
    }
    dialogAdd.value=true;
}

const submitFormAdd = async (formEl: FormInstance | undefined) => {
     if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        http.post('/T8/PhysicalGrid/CreatePhysicalGrid',ruleForm).then(res=>{
            if(res.data.code==200){
                //提示
                ElMessage.success(res.data.msg);
                //更新列表数据
                search();
                //关闭
                dialogAdd.value = false;
                //清理双向绑定表单数据
                ruleForm.areaId=null
                ruleForm.areaName=''
                ruleForm.gridCode=''
                ruleForm.gridName=''
            }
        })


    } else {
      console.log('error submit!', fields)
    }
  })
}


onMounted(() => {
    getData();
    search();
})
</script>